<template>
  <div :id="uid" :style="style"></div>
</template>

<script setup>
import { loopShowTooltip } from '@/utils/echarts-auto-tooltip.js'
import * as echarts from 'echarts'

const props = defineProps({
  option: {
    type: Object,
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
})

const uid = ref(`chart-${Date.now()+Math.random()}`)
let myChart = null
let chartTools = null
const style = computed(() => ({
  width: props.width,
  height: props.height,
}))

const initChart = () => {
  // 确保在初始化之前销毁旧的图表实例，以避免内存泄漏
  if (myChart) {
    myChart.dispose()
    chartTools.clearLoop()
  }
  if (props.option) {
    myChart = echarts.init(document.getElementById(uid.value))
    myChart.setOption(props.option)
    chartTools = loopShowTooltip(myChart,props.option)
  }
}

// 在组件挂载时初始化图表
onMounted(() => {
  initChart()
})

// 监听 props.option 的变化
watch(
  () => props.option,
  (newOption) => {
    if (myChart) {
      // 如果图表实例存在，则直接更新选项
      myChart.setOption(newOption)
      chartTools = loopShowTooltip(myChart, newOption)
    } else {
      // 如果图表实例不存在（例如，组件首次加载后），则重新初始化
      initChart()
    }
  },
  { deep: true }, // 深度监听 option 对象内部属性的变化
)

defineExpose({ initChart })
</script>
